<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可以开始聊天啦</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/client.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    
    <div class="cover"></div>
    <div class="client-container">
        <div class="main">
            <div class="left">
                <div class="name"></div>
                <!-- 搜索框 -->
                <div class="search">
                    <input type="text" placeholder="搜索好友">
                    <button id="searchButton"></button>
                </div>
                <!-- 标签页 -->
                <div class="table">
                    <div class="table-session"></div>
                    <div class="table-friend"></div>
                </div>
                <ul class="list" id="session-list">
                  
                </ul>
                <ul class="list list-hide" id="friend-list">
                    
                </ul>
            </div>
            <!-- 这里暂时先将右侧消息框隐藏起来 -->
            <div class="right">
                <div class="title"></div>
                <!-- 消息区 -->
                <div class="massage-show">
                    <div class="massage massage-right">
                        <div class="file-bubble completed">
                            <div class="file-icon">
                                <i class="fas fa-file"></i>
                        
                            </div>
                            <div class="file-info">
                                <div class="file-name">filename</div>
                                <div class="file-size">40.9MB</div>
                                <div class="progress-container">
                                    <div class='progress-bar'></div>
                                </div>
                                <div class="progress-text">上传文件 100%</div>
                                <div class="upload-complete">
                                    <i class="fas fa-check-circle"></i>
                                    "上传完成"
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <textarea name="send" id="send"></textarea>
                <div class="toolbar">
                  <button id="emoji-btn-first">😊</button>
                  <label id="file-input-first" for="fileInput">
                    <i class="fas fa-paperclip"></i>
                  </label>
                  <input type="file" id="fileInput">
                </div>
                
                
                <div id="emoji-panel">
                  <!-- 动态加载表情 -->
                </div>
                <div class="ctrl">
                    <button id="button-send">发送</button>
                </div>
            </div>
            <div class="friends list-hide">
                <!-- 先构造搜索到多个好友的情况 --> 
                <div class="title">搜索结果</div>
                <div class="friends-show">
                  
                </div>
                <div class="error list-hide">
                    <div class="errorText">肥肠抱歉,似乎没有这个人 「＞﹏＜」</div>
                    <div class="error-image-box">
                        <div class="error-image"></div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/client.js"></script>
    <script src="js/common.js"></script>
</body>
</html>